<template>
  <el-card class="margin-bottom">
    <div slot="header" class="clearfix relative">
      <span class="title-icon">文件列表</span>
    </div>
    <div class="text-left padding-lr">
      <el-table size="mini" :data="SearchData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <ex-table-column
          v-for="column in tableColumns"
          :key="column.prop"
          :auto-fit="true"
          :fit-header="true"
          :prop="column.prop"
          :label="column.label"
        >
          <!--特殊处理-->
          <template slot-scope="scope">
            <template v-if="column.prop =='fileTypeId'">
              {{fileTypeOptions[scope.row[column.prop]]}}
            </template>
            <template v-else>
              {{scope.row[column.prop]}}
            </template>
          </template>
        </ex-table-column>
        <!--特殊处理的操作-->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip content="下载">
              <i class="el-icon-download" @click="dowmLoadWaybillFile(scope.$index,scope.row)"></i>
            </el-tooltip>
            <el-tooltip>
            </el-tooltip>
            <el-tooltip content="编辑">
              <i class="el-icon-edit-outline" @click="editToUploadfile(scope.$index,scope.row)"></i>
            </el-tooltip>
            <el-tooltip>
            </el-tooltip>
            <el-tooltip content="删除">
              <i class="el-icon-delete" @click="deleteWaybillFile(scope.$index,scope.row)"></i>
            </el-tooltip>
            <el-tooltip>
            </el-tooltip>
            <el-tooltip content="分配">
              <i class="el-icon-s-promotion" @click="toAllocationFile(scope.$index,scope.row)"></i>
            </el-tooltip>
            <el-tooltip>
            </el-tooltip>
            <el-tooltip content="预览">
              <i class="el-icon-view" @click="onlinePreviewFile(scope.$index,scope.row)"></i>
            </el-tooltip>
            <el-tooltip>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="synchronizedAllocatedWayBillfile 测试" placement="left">
              <i class="el-icon-folder-opened" @click="dowmLoadWaybillFile(scope.$index,scope.row)"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--上传文件 -->
    <Uploadfile ref="Uploadfile" :fileTypeOptions="fileTypeOptions"></Uploadfile>
    <!--发送邮件 -->
    <SendEmailPage ref="SendEmailPage" :userOptions="userOptions"></SendEmailPage>
    <br/>
    <el-button type="primary" class="el-button--mini" @click="toUploadfile">上传</el-button>
    <el-button type="success" class="el-button--mini" @click="batchDownLoadFile">批量下载文件</el-button>
    <el-button type="warning" class="el-button--mini" @click="toSendEmailPage">发送邮件</el-button>
  </el-card>
</template>

<script>
  //引入 ajax 工具
  import {ajax} from "@/store/yg/common/utils";
  //上传文件
  const Uploadfile = () => import("../alledit/components/Uploadfile");
  //发送邮件
  const SendEmailPage = () => import("../alledit/components/SendEmailPage");
  //全局文件 配置
  import * as constant from "@/store/yg/common/constant";

  export default {
    components: {
      Uploadfile,
      SendEmailPage
    },
    props: ['row', 'data'],
    data() {
      return {
        tableColumns: [
          {
            prop: "fileName",
            label: "文件名称"
          },
          {
            prop: "fileTypeId",
            label: "文件类型"
          },
          {
            prop: "fileUrl",
            label: "文件路径"
          },
          {
            prop: "remark",
            label: "文件备注"
          },
          {
            prop: "creator",
            label: "创建人"
          },
          {
            prop: "createTime",
            label: "创建时间"
          }
        ],
        waybillId: "",
        SearchData: [],
        //file 的文件id
        listSelect: [],
        multipleSelection: [],
        fileTypeOptions: {},
        userOptions: {}
      };
    },
    //生命周期函数  页面渲染完成
    mounted() {
      if (this.$route.query.pid) {
        this.showAllFiles(this.$route.query.pid);
        this.waybillId = this.$route.query.pid;
      } else {
        this.$message.error("数据初始化失败");
        return;
      }
    },
    methods: {
      async showAllFiles(pid) {
        const {code, data, message, data2} = await ajax('showAllFiles', {id: pid})
        if (code !== 200) {
          //框架错误提示信息
          if (message) {
            this.$message.error(message);
            return;
          } else {
            this.$message.error("服务器异常");
            return;
          }
        }
        //查询到的数据  直接赋值给 SearchData
        this.SearchData = data;
        this.fileTypeOptions = data2.fileTypeMap;
        this.userOptions = data2.userOptions;
      },
      //上传文件
      toUploadfile() {
        this.$refs.Uploadfile.centerDialogVisible = true;
      },
      handleSelectionChange(val) {
        this.listSelect = [];
        // id 选择的 所有的 id的数据
        for (const i of val) {
          this.listSelect.push(i.id)
        }
        console.log("this.listSelect", this.listSelect);
        //这个是选择的所以的 数据
        this.multipleSelection = val;
      },
      //批量下载所选择的 文件
      batchDownLoadFile() {
        if (!this.listSelect.length > 0) {
          this.$message.error("请选择文件！");
          return;
        }
        var postUrl = "batchExportWaybillFileByWaybillIds";
        var param = {};
        param["ids"] = this.listSelect;
        param["param1"] = "文件批量下载";
        ajax(postUrl, param).then(
          res => {
            console.log(res);
            this.fullscreenLoading = false;
            if (res.errorMesage) {
              this.$message.error(m(res.errorMesage));
            } else {
              //文件下载url
              var path = constant.FILE_SERVER + res.path;
              location.href = constant.API_SERVER + "/open/downloadFileByHttp?fileName=" + res.fileName + "&path=" + path;
            }
          },
          error => {
            console.log(error);
          }
        );
      },
      //发送邮件
      toSendEmailPage() {
        if (!this.listSelect.length > 0) {
          this.$message.error("请选择文件！");
          return;
        }
        this.fullscreenLoading = true;
        var param = {};
        const waybillId = this.$route.query.pid;
        param["waybillId"] = waybillId;
        ajax("toSendEmailPage", param).then(
          res => {
            this.fullscreenLoading = false;
            if (res.code == 200) {
              this.$refs.SendEmailPage.centerDialogVisible = true;
              this.$refs.SendEmailPage.fileList = this.listSelect;
              this.$refs.SendEmailPage.packetData.subject = res.data["defaultSubject"];
              this.$refs.SendEmailPage.packetData.content = res.data["defaultContent"];
              this.$refs.SendEmailPage.packetData.sendIno = res.data["userId"];
            }
          },
          error => {
            console.log(error);
          }
        );
      },
      //删除文件
      deleteWaybillFile(index, row) {
        console.log(row);
        var fileUrl = row.fileUrl;
        var param = {};
        param["id"] = row.id;
        param["fileUrl"] = fileUrl;
        this.fullscreenLoading = true;
        ajax("deleteWaybillFile", param).then(
          res => {
            this.fullscreenLoading = false;
            if (res.code != 200) {
              if (null != res.message) {
                this.$message.error(m(res.message));
              } else {
                this.$message.error("修改失败!");
              }
            } else {
              this.$message.success("删除成功!");
              this.SearchData.splice(index, 1);
              // window.location.reload();
            }
          },
          error => {
            console.log(error);
          }
        );
      },
      /** 直接通过保存到数据库的地址下载文件*/
      dowmLoadWaybillFile(index, row) {
        var fileName = row.fileUrl;
        var uploadpath = "/"
        console.log(fileName);
        var path = (path = constant.FILE_SERVER + uploadpath);
        var fileUrl = path + fileName;
        window.open(fileUrl);
        // location.href = constant.API_SERVER + "/open/downloadFileByHttp?fileName=" + fileName + "&path=" +  path;
      },
      /**
       * 编辑文件的功能 上传文件成功后 需要 编辑
       * @param index
       * @param row
       */
      editToUploadfile(index, row) {
        this.$refs.Uploadfile.centerDialogVisible = true;
      },
      /**
       * 文件预览
       * @param index
       * @param row
       */
      onlinePreviewFile(index, row) {
        this.$message.error("文件在线预览暂未开发，请导出后查看");
      },
      /**
       * 分配文件
       * @param index
       * @param row
       */
      toAllocationFile(index, row) {
        //获取当前路由地址
        var url = "#/blank/waybill__allocationtraceFile__main";
        url = url + "?fileId=" + row.id + "&waybillId=" + this.waybillId + "&fileName=" + row.fileName;
        window.open(url, "_blank");
      },
    },
  };
</script>
<style scoped>
  /deep/ .el-select,
  .el-input-number,
  .el-date-editor {
    width: 100%;
  }
</style>
